<div class="page">
    <div class="main">
        <div class="step">
            <div class="done done2">
                <img src="../../../../../assets/images/done.png"><span>模板配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>数据集配置</span>
            </div>
            <div class="done done1">
                <img src="../../../../../assets/images/run.png"><span>模型配置</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型训练</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>应用评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="context">
            <div class="left">
                <nz-collapse nzGhost="true" nzBordered="false">
                    <nz-collapse-panel nzHeader="物体检测模型" nzActive="true" [nzHeader]="prefixTemplate1">
                        <div class="panelCtx">
                            <div class="panel-title">训练模型配置</div>
                            <div class="panel-item">
                                <div class="panel-item-title">模型版本</div>
                                <div class="panel-item-form"><input nz-input placeholder="请选择模型版本" /></div>
                            </div>
                            <div class="panel-title">训练参数</div>
                            <div class="panel-item">
                                <div class="panel-item-title">精度指标</div>
                                <div class="panel-item-form"><input nz-input placeholder="" /></div>
                            </div>
                            <div class="panel-item">
                                <div class="panel-item-title">最大训练轮次</div>
                                <div class="panel-item-form"><input nz-input placeholder="" /></div>
                            </div>
                            <div class="panel-title" (click)="swIsParms()">可选参数&nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon [nzType]="isParms?'caret-up':'caret-down'" nzTheme="outline"></i></div>
                            <div class="parms" *ngIf="isParms">
                                <div class="parms-head">                                    
                                    <div>名称</div>
                                    <div>值</div>
                                </div>
                                <div class="parms-val">                                    
                                    <div>参数1</div>
                                    <div><input nz-input placeholder="" /></div>
                                </div>
                                <div class="parms-val">                                    
                                    <div>参数2</div>
                                    <div><input nz-input placeholder="" /></div>
                                </div>
                                <div class="parms-val">                                    
                                    <div>参数3</div>
                                    <div><input nz-input placeholder="" /></div>
                                </div>
                                <div class="parms-val">                                    
                                    <div>参数4</div>
                                    <div><input nz-input placeholder="" /></div>
                                </div>
                            </div>
                            <div class="panel-title">训练资源配置</div>
                            <div class="panel-item">
                                <div class="panel-item-title">资源池</div>
                                <div class="panel-item-form">
                                    <button nz-button nzType="default"
                                        class="selected">公共资源池</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button nz-button nzType="default" class="unselect">专属资源池</button>
                                </div>
                            </div>
                            <div class="panel-item">
                                <div class="panel-item-title">计算节点规格</div>
                                <div class="panel-item-form">
                                    <nz-select ngModel="nodeSel">
                                        <nz-option nzValue="ModelArts Pro" nzLabel="ModelArts Pro"></nz-option>
                                    </nz-select>
                                </div>
                            </div>
                            <div class="panel-item">
                                <div class="panel-item-title">最大运行时长</div>
                                <div class="panel-item-form" style="height: 80px;">
                                    <nz-switch [(ngModel)]="isStop"></nz-switch>
                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;训练运行达到最大时长后会自动停止，可能会导致训练失败。</span>
                                    <br>
                                    <nz-input-number [(ngModel)]="timeValue" [nzMin]="1"  [nzStep]="1">
                                    </nz-input-number>
                                </div>
                            </div>

                        </div>
                    </nz-collapse-panel>
                    <ng-template #prefixTemplate1>
                        <div style="display: flex;align-items: center;">
                            <span style="font-size: 16px;font-weight: bold;">物体检测模型</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<nz-switch
                                [(ngModel)]="swObject" (click)="$event.stopPropagation();"></nz-switch>
                            &nbsp;&nbsp;<span>是否启动训练</span>
                        </div>
                    </ng-template>
                    <nz-collapse-panel nzHeader="文字识别模型" [nzHeader]="prefixTemplate2">
                        <div class="panel-title">训练模型配置</div>
                        <div class="panel-item">
                            <div class="panel-item-title">模型版本</div>
                            <div class="panel-item-form"><input nz-input placeholder="请选择模型版本" /></div>
                        </div>
                    </nz-collapse-panel>
                    <ng-template #prefixTemplate2>
                        <div style="display: flex;align-items: center;">
                            <span style="font-size: 16px;font-weight: bold;">文字识别模型</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<nz-switch
                                [(ngModel)]="swDiscern" (click)="$event.stopPropagation();"></nz-switch>
                            &nbsp;&nbsp;<span>是否启动训练</span>
                        </div>
                    </ng-template>
                    <nz-collapse-panel nzHeader="文字检测模型" [nzHeader]="prefixTemplate3">
                        <div class="panel-title">训练模型配置</div>
                        <div class="panel-item">
                            <div class="panel-item-title">模型版本</div>
                            <div class="panel-item-form"><input nz-input placeholder="请选择模型版本" /></div>
                        </div>
                    </nz-collapse-panel>
                    <ng-template #prefixTemplate3>
                        <div style="display: flex;align-items: center;">
                            <span style="font-size: 16px;font-weight: bold;">文字检测模型</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<nz-switch
                                [(ngModel)]="swTest" (click)="$event.stopPropagation();"></nz-switch>
                            &nbsp;&nbsp;<span>是否启动训练</span>
                        </div>
                    </ng-template>
                </nz-collapse>
            </div>
            <div class="right">
                <nz-timeline>
                    <nz-timeline-item>物体检测模型</nz-timeline-item>
                    <nz-timeline-item>文字识别模型</nz-timeline-item>
                    <nz-timeline-item>文字检测模型</nz-timeline-item>
                </nz-timeline>
            </div>
        </div>
    </div>
    <div class="bottom">
        <button nz-button nzType="defalut" class="prebutton" >上一步</button>
        <button nz-button nzType="defalut" class="nextbutton" (click)="nextStep()">下一步</button>
    </div>
</div>